'use client'

import { useState } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { useParams } from 'next/navigation'

const products = [
  {
    id: 1,
    name: 'ZYN Icy Mint XX-Strong',
    strength: '12.5mg',
    price: 3.99,
    image: 'https://cdn.gd.image.cn/images/2024/02/21/1.jpg',
    category: 'Strong',
    description: 'Fresh mint flavor with extra strong nicotine content, providing long-lasting satisfaction. Ideal for experienced users.',
    features: [
      'Extra Strong Nicotine: 12.5mg',
      'Long-lasting Release: Up to 60 minutes',
      'Premium Materials: High-quality nicotine salt',
      'Discreet: No smoke, no smell'
    ],
    stock: 50
  },
  {
    id: 2,
    name: 'ZYN Cool Mint Max Slim',
    strength: '12mg',
    price: 3.99,
    image: 'https://cdn.gd.image.cn/images/2024/02/21/2.jpg',
    category: 'Strong',
    description: 'Cool mint flavor with strong nicotine content, slim design for comfortable use.',
    features: [
      'Strong Nicotine: 12mg',
      'Ultra-slim Design: Enhanced comfort',
      'Long-lasting Coolness: Mint sensation',
      'Quality Control: Strict standards'
    ],
    stock: 45
  },
  {
    id: 3,
    name: 'ZYN Icy Blackcurrant XX-Strong',
    strength: '12.5mg',
    price: 3.99,
    image: 'https://cdn.gd.image.cn/images/2024/02/21/3.jpg',
    category: 'Strong',
    description: 'Blackcurrant fruit flavor with extra strong nicotine content, unique taste experience.',
    features: [
      'Extra Strong Nicotine: 12.5mg',
      'Unique Flavor: Blackcurrant blend',
      'Consistent Release: Stable sensation',
      'Premium Selection: Choice materials'
    ],
    stock: 30
  },
  {
    id: 4,
    name: 'ZYN Citrus Slim Extra Strong',
    strength: '11mg',
    price: 3.99,
    image: 'https://cdn.gd.image.cn/images/2024/02/21/4.jpg',
    category: 'Extra Strong',
    description: 'Fresh citrus flavor with extra strong nicotine content, providing unique citrus experience.',
    features: [
      'Extra Strong Nicotine: 11mg',
      'Fresh Flavor: Citrus blend',
      'Slim Design: Comfortable fit',
      'Quality Assured: Strict testing'
    ],
    stock: 40
  },
  {
    id: 5,
    name: 'ZYN Cool Frost Slim Strong',
    strength: '9mg',
    price: 3.99,
    image: 'https://cdn.gd.image.cn/images/2024/02/21/5.jpg',
    category: 'Medium',
    description: 'Frost mint flavor with medium nicotine content, balanced taste and strength.',
    features: [
      'Medium Nicotine: 9mg',
      'Balanced Taste: Frost mint',
      'Comfortable Design: Slim fit',
      'Consistent Quality: Controlled process'
    ],
    stock: 60
  },
  {
    id: 6,
    name: 'ZYN Fresh Mint Slim',
    strength: '6mg',
    price: 3.99,
    image: 'https://cdn.gd.image.cn/images/2024/02/21/6.jpg',
    category: 'Light',
    description: 'Fresh mint flavor with mild nicotine content, perfect for beginners.',
    features: [
      'Mild Nicotine: 6mg',
      'Fresh Taste: Natural mint',
      'Beginner Friendly: Moderate strength',
      'Quality Control: Safe and reliable'
    ],
    stock: 75
  }
]

export default function ProductDetail() {
  const params = useParams()
  const [quantity, setQuantity] = useState(1)
  
  const product = products.find(p => p.id === Number(params.id))
  
  if (!product) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Product Not Found</h1>
          <Link href="/shop" className="text-primary hover:underline">
            Back to Shop
          </Link>
        </div>
      </div>
    )
  }

  const handleQuantityChange = (delta: number) => {
    setQuantity(prev => Math.max(1, Math.min(prev + delta, product.stock)))
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container py-16">
        <div className="mb-8">
          <Link href="/shop" className="text-primary hover:underline flex items-center">
            <svg className="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Back to Products
          </Link>
        </div>

        <div className="bg-white rounded-lg shadow-sm overflow-hidden">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 p-8">
            {/* Product Image */}
            <div className="relative aspect-square">
              <Image
                src={product.image}
                alt={product.name}
                fill
                className="object-cover rounded-lg"
              />
            </div>

            {/* Product Info */}
            <div>
              <div className="mb-6">
                <h1 className="text-3xl font-bold mb-2">{product.name}</h1>
                <span className="inline-block px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm mb-4">
                  {product.category}
                </span>
                <p className="text-gray-600 mb-4">{product.description}</p>
                <div className="text-3xl font-bold text-primary mb-6">
                  ${product.price}
                </div>
              </div>

              <div className="mb-6">
                <h2 className="font-semibold mb-2">Specifications</h2>
                <p className="text-gray-600">Strength: {product.strength}</p>
              </div>

              <div className="mb-6">
                <h2 className="font-semibold mb-2">Stock Status</h2>
                <p className="text-gray-600">{product.stock} units available</p>
              </div>

              <div className="mb-8">
                <h2 className="font-semibold mb-4">Quantity</h2>
                <div className="flex items-center space-x-4">
                  <div className="flex items-center border rounded">
                    <button
                      onClick={() => handleQuantityChange(-1)}
                      className="px-4 py-2 hover:bg-gray-100"
                    >
                      -
                    </button>
                    <span className="px-4 py-2 border-x">{quantity}</span>
                    <button
                      onClick={() => handleQuantityChange(1)}
                      className="px-4 py-2 hover:bg-gray-100"
                    >
                      +
                    </button>
                  </div>
                </div>
              </div>

              <button className="btn-primary w-full mb-6">
                Add to Cart
              </button>

              <div>
                <h2 className="font-semibold mb-4">Product Features</h2>
                <ul className="space-y-2">
                  {product.features.map((feature, index) => (
                    <li key={index} className="flex items-center text-gray-600">
                      <svg className="w-5 h-5 mr-2 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* Warning Notice */}
        <div className="mt-16 text-center text-gray-500">
          <p className="text-sm">WARNING: This product contains nicotine. Nicotine is an addictive chemical.</p>
        </div>
      </div>
    </div>
  )
} 